<template name="afArrayField_bootstrap3-horizontal">
  <div class="form-group{{#if afFieldIsInvalid name=this.atts.name}} has-error{{/if}}">
    <label {{afFieldLabelAtts}}>{{afFieldLabelText name=this.atts.name}}</label>
    <div class="{{rightColumnClass}}">
      <div class="panel panel-default autoform-padding-fix">
        {{#if afFieldIsInvalid name=this.atts.name}}
        <div class="panel-body has-error">
          <span class="help-block">{{{afFieldMessage name=this.atts.name}}}</span>
        </div>
        {{/if}}
        <ul class="list-group">
          {{#afEachArrayItem name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}
          <li class="list-group-item autoform-array-item">
            <div>
              <div class="autoform-remove-item-wrap">
                {{#if afArrayFieldHasMoreThanMinimum name=../atts.name minCount=../atts.minCount maxCount=../atts.maxCount}}
                <button type="button" class="btn btn-primary autoform-remove-item"><span class="glyphicon glyphicon-minus"></span></button>
                {{/if}}
              </div>
              <div class="autoform-array-item-body">
                {{> afQuickField name=this.name label=false options=afOptionsFromSchema}}
              </div>
            </div>
          </li>
          {{/afEachArrayItem}}
          {{#if afArrayFieldHasLessThanMaximum name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}
          <li class="list-group-item">
            <button type="button" class="btn btn-primary autoform-add-item" data-autoform-field="{{this.atts.name}}" data-autoform-minCount="{{this.atts.minCount}}" data-autoform-maxCount="{{this.atts.maxCount}}"><span class="glyphicon glyphicon-plus"></span></button>
          </li>
          {{/if}}
        </ul>
      </div>
    </div>
  </div>
</template>
